<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="swiper-container" id="swiper-container-v">
    <div class="swiper-wrapper" style="height: auto" id="wrapper">
        <!-------------slide1----------------->
        <section style="background: red" class="swiper-slide swiper-slide1 swiper-slide-v" ></section>
        <!---------------slide2-------------->
        <section style="background: green" class="swiper-slide swiper-slide2 swiper-slide-v"></section>
        <!----------------slide3-------------->
        <section style="background: blue" class="swiper-slide swiper-slide3 swiper-slide-v"></section>
        <!-------------slide4----------------->
        <section style="background: yellow" class="swiper-slide swiper-slide4 swiper-slide-v"></section>
        <!-------------slide5----------------->
        <section style="background: pink" class="swiper-slide swiper-slide5 swiper-slide-v"></section>

        <!-------------slide6----------------->
        <section style="background: black" class="swiper-slide swiper-slide6 swiper-slide-v">
            <a class="search_footer_btn ani" href="#"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s" id="saveBill">一键保存</a>
            <a id="btn" href="javascript:;"style="opacity: 0">点我</a>
        </section>
    </div>


</div>

<script src="js/code.min.js"></script>
<!--切换效果采用Swiper，更多Swiper应用敬请关注Swiper中文网-->

<script src="./js/jquery-1.10.2.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<script>
    $(function(){
        var saveBill = $('#saveBill');
        var clicked = true;
        var width = $(document).width();
        console.log(width)
        saveBill.click(function(){
            $("#swiper-container-v").css("height","auto");
            var bombBox= $("#swiper-container-v").clone();
            bombBox.css({"z-index": "-22","position": "fixed", "top": "0","left":"0"})
            $('body').append(bombBox);
            $(".swiper-wrapper").css("transform","translate3d(0px, 0px, 0px)")
           html2canvas(bombBox,{
               onrendered:function(canvas){
                   $("#btn").attr('href',canvas.toDataURL());
                   //下载下来的图片名字
                   $("#btn").attr('download','receiptList.png') ;
                   if(clicked) {
                       document.getElementById("btn").click();
                       clicked = false;
                   }
                   $("#swiper-container-v").css({"height":"100%","overflow":"hidden"});
                   $(".swiper-wrapper").css("transform","translate3d(0px, -3680px, 0px)")
                   bombBox.remove()
               }
           });

        });
    })
</script>
</body>
</html>
